<template>
  <div id="map" class="map" ref="rootmap"></div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      new Map({
        target: 'map',
        layers: new TileLayer({
          source: new XYZ({
            // url: 'http://127.0.0.1:7080/streetmap/shenzhen/{z}/{x}/{y}.jpg',
            url:
              'http://8.136.236.190:30000/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=zhejiang:tb_cereal_2021&STYLE=' +
              '&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}',
              // http://8.136.236.190:30000/geoserver/gwc/service/wmts?layer=zhejiang%3Atb_land_330521&style=&tilematrixset=EPSG%3A4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG%3A4326%3A11&TileCol=3414&TileRow=675
          }),
        }),
        view: new View({
          projection: 'EPSG:4326',
          center: [120.8, 30.67],
          zoom: 15,
        }),
      });
    },
  },
};
</script>

<style></style>
